<template>
  <mars-dialog customClass="mark-dialog" title="我的标记" :max-width="800" width="326" top="60" right="10" icon="mark">
    <div class="header-tool">
      <div class="tool-item" title="打开文件">
        <a-upload
          :multiple="false"
          name="file"
          accept="json,geojson"
          :file-list="fileList"
          :showUploadList="false"
          :supportServerRender="true"
          :beforeUpload="() => false"
          @change="onClickMarkerOpenfile"
        >
          <mars-icon icon="folder-close" size="18"></mars-icon>
        </a-upload>
      </div>
      <div class="tool-item" title="叠加文件">
        <a-upload
          :multiple="false"
          name="file"
          accept="json,geojson"
          :file-list="fileList"
          :showUploadList="false"
          :supportServerRender="true"
          :beforeUpload="() => false"
          @change="onClickMarkerOverfile"
        >
          <mars-icon icon="folder-plus" size="18"></mars-icon>。
        </a-upload>
      </div>
      <div class="tool-item" title="保存文件" @click="onClickMarkerSavefile">
        <mars-icon icon="inbox-download-r" size="18"></mars-icon>
      </div>
      <div class="left-bord"></div>
      <div class="tool-item" title="清空标记" @click="onClickMarkerDeleteAll">
        <mars-icon icon="delete" size="18"></mars-icon>
      </div>
      <div class="tool-item" title="是否可编辑" @click="onClickMarkerEditor">
        <mars-icon v-show="lockEditor" icon="unlock" width="18"></mars-icon>
        <mars-icon v-show="!lockEditor" icon="lock" width="18"></mars-icon>
      </div>
    </div>
    <div class="container">
      <div class="container-header">
        <mars-button class="btn" @click="onClickMarkerAdd">
          <mars-icon icon="add"></mars-icon>
          <span class="btn-label">添加注记</span>
        </mars-button>
      </div>
      <div class="container-list">
        <div class="list-item" v-for="(item, index) in dataSource" :key="index" @click="flyTo(item)">
          <div class="list-name">{{ item.name }}</div>
          <div class="list-delete">
            <mars-icon v-show="lockEditor" icon="delete" color="rgba(249, 104, 104, 0.7)" @click="deleted(item)"></mars-icon>
          </div>
        </div>
      </div>
    </div>
  </mars-dialog>
</template>

<script setup lang="ts">
import { ref, onUnmounted } from "vue"
import { saveJSON, readJSON } from "@mars/utils/file-util"
import useLifecycle from "@mars/common/uses/use-lifecycle"
import { useWidget } from "@mars/common/store/widget"
import * as api from "@mars/common/api"
import * as mapWork from "./map"
import { logInfo, logWarn } from "@mars/utils/mars-util"

// 启用map.ts生命周期
useLifecycle(mapWork)

const { updateWidget } = useWidget()

// 取消工具栏高亮
onUnmounted(() => {
  updateWidget("toolbar", "addmarker")
})

// 加载历史数据
const getHistoryList = async (isClear = false) => {
  const { data } = await api.getMarkerPointHistoryList()
  // dataSource.value = []
  // if (code === 200) {
    dataSource.value = mapWork.loadJson(data, isClear) || []
  // }
}
getHistoryList()

// 添加注记
const onClickMarkerAdd = async () => {
  mapWork.stopGraphicDraw()
  const mark = await mapWork.onClickMarkerAdd()
  // const { data, code } = await api.addMarkerPointHistory(mark)

  // if (code === 200) {
  //   dataSource.value.push(mark)
  // } else {
  //  logWarn("添加失败", data)
  // }
}
// popup中点击事件，更新名称以及历史记录
mapWork.eventTarget.on("clickPopupBtn", (e) => {
  const tableOneData = dataSource.value.find((value) => value.key === e.key)
  if (tableOneData) {
    tableOneData.name = e.name
    tableOneData.key = e.key
  }

  updateChangeGraphic({ ...tableOneData, remark: e.remark, type: "point", point: e.point })
})

mapWork.eventTarget.on("removeMarker", async (obj) => {
  // if (obj.key) {
  //   const { code } = await api.deleteMarkerPointHistoryById(obj.id)
  // } else {
  //   const data = dataSource.value.find((value) => value.key === obj.id)

  //   data && deleteGraphicById(data.id, data.key)
  // }
})

// 清除
const onClickMarkerDeleteAll = async () => {
  // const { code } = await api.deleteAll()
  // if (code === 200) {
  //   mapWork.onClickMarkerDeleteAll()
  //   dataSource.value = []
  // }
}

// 是否编辑
const lockEditor = ref(true)
const onClickMarkerEditor = () => {
  mapWork.stopGraphicDraw()
  lockEditor.value = !lockEditor.value

  mapWork.onClickMarkerEditor(lockEditor.value)
}

// *****************************************文件******************************************** //
interface FileItem {
  uid: string
  name?: string
  status?: string
  response?: string
  url?: string
}

interface FileInfo {
  file: FileItem
  fileList: FileItem[]
}

let fileList: FileItem

// 保存文件
const onClickMarkerSavefile = () => {
  mapWork.stopGraphicDraw()

  saveJSON(mapWork.getJsonData())
}

// 打开文件
const onClickMarkerOpenfile = async (info: FileInfo) => {
  mapWork.stopGraphicDraw()
  const getData = await readJSON<any[]>(info.file)

  // const { code } = await api.deleteAll()
  // if (code === 200) {
  //   mapWork.onClickMarkerDeleteAll()
  //   await api.addMarkerPointcalList(getData)
  //   getHistoryList()
  // }
}

// 叠加文件
const onClickMarkerOverfile = async (info: FileInfo) => {
  mapWork.stopGraphicDraw()
  const data = await readJSON<any[]>(info.file)

  if (data.length) {
    mapWork.onClickMarkerDeleteAll()
    await api.addMarkerPointcalList(data)
    getHistoryList(false)
  }
}

// *****************************************表格******************************************** //
interface DataTable {
  id?: string
  key: string | number
  name: string
}

const dataSource = ref<DataTable[]>([])

const columns = [
  {
    title: "名称",
    dataIndex: "name",
    key: "name",
    id: "name",
    showSorterTooltip: false,
    width: 100,
    align: "center",
    sorter: (a: DataTable, b: DataTable) => (a.name > b.name ? -1 : 1)
  },
  {
    title: "操作",
    dataIndex: "operation",
    key: "operation",
    id: "name",
    align: "center",
    width: 60
  }
]

// 删除对应id的矢量数据
const deleted = (record: DataTable) => {
  deleteGraphicById(record.id, record.key)
}

// 点击表格定位至对应id的矢量数据
const flyTo = (record: DataTable) => {
  mapWork.flyTo(record.key)
}

// 修改数据的名字
const updateChangeGraphic = async (historyData: any) => {
  historyData = await api.updateMarkerPointHistory(historyData)
  if (!historyData) {
    return
  }

  if (historyData.code === 200) {
    logInfo("修改成功", historyData.data)
  } else {
    logWarn("修改失败", historyData.data)
  }
}

// 删除对应id的记录和数据 id -- 根据id删除记录的数据，key删除对应矢量数据
const deleteGraphicById = async (id: string | number, key: string | number) => {
  // const { code } = await api.deleteMarkerPointHistoryById(id)
  // if (code === 200) {
  //   dataSource.value = dataSource.value.filter((item: DataTable) => item.key !== key)
  //   mapWork.deleteItemById(key)
  // } else {
  //   logWarn("删除失败")
  // }
}
</script>
<style scope lang="less">
.header-tool {
  display: flex;
  width: 180px;
  margin-bottom: 10px;
  justify-content: space-between;
  .tool-item {
    width: 30px;
    text-align: center;
    position: relative;
    cursor: pointer;
  }
  .left-bord {
    width: 1px;
    height: 18px;
    margin: 0 6px;
    background: #fff;
  }
}
.container {
  min-height: 180px;

  .container-header {
    width: 100%;
    margin-bottom: 14px;

    .btn {
      width: 100%;

      .btn-label {
        display: inline-block;
        margin-right: 8px;
      }
    }
  }

  .container-list {
    width: 100%;

    .list-item {
      height: 32px;
      padding: 0 12px;
      margin-bottom: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 2px;
      background: rgba(234, 242, 255, 0.2);
      border: 1px solid rgba(234, 242, 255, 0.1);

      &:last-child {
        margin-bottom: 0px;
      }

      &:hover {
        background: rgba(234, 242, 255, 0.4);
      }
    }
  }
}

.mark-dialog::after {
  content: " ";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 63px;
  pointer-events: none;
  //background: linear-gradient(180deg, rgba(39, 44, 54, 0) 0%, #272c36 83%);
}

//***************修改popup弹窗******************** */
.mars3d-mark-pupup {
  .mars3d-popup {
    position: relative;
  }

  .mars3d-popup .closeButton {
    position: absolute;
    top: 10px;
    right: 10px;
  }

  .mars3d-popup-content-wrapper {
    width: 338px;
    /* height: 206px; */
  }

  .mars3d-template-title {
    background-color: #464c5a !important;
    border-bottom: 1px solid #464c5a !important;
  }

  .mars3d-popup-content {
    margin: 0px !important;
  }

  .mars3d-template-content {
    position: relative;
    top: -1px;
  }

  .mars3d-template-content > div {
    display: flex;
    align-items: center;
    margin-top: 18px;
  }

  .mars3d-template-content > div:first-child {
    margin-top: 10px;
  }

  .mars3d-template-content label {
    line-height: 32px !important;
  }

  .mars3d-popup-edititem {
    height: 32px !important;
    width: 256px !important;
  }

  .mars3d-template-content input {
    background-color: rgba(35, 39, 47, 0.7) !important;
  }

  .mars3d-template-content textarea {
    background-color: rgba(35, 39, 47, 0.7) !important;
  }

  .mars3d-template-content label {
    margin: 0 !important;
    position: relative;
    left: -1px;
  }

  .mars3d-popup-btn-custom {
    width: 98%;
    height: 32px;
    border-radius: 2px;
    background: #3385ff;
  }

  .mars3d-popup-tip-container {
    top: -1px;
  }

  .mars3d-popup-tip {
    background-color: rgba(63, 72, 84, 0.9) !important;
  }
}
</style>
